<template>
  <!-- 一级菜单 -->
  <el-menu-item v-if="!datas.menus" :index="'/' + datas.url" :key="datas.menuid" @click="clickMenu(datas)">
    <i class="iconfont" :class="datas.icon"></i>
    <span slot="title" class="label">{{ datas.menuname }}</span>
  </el-menu-item>
  <!-- 二级菜单 -->
  <el-submenu v-else :index="datas.menuname || datas.url" :key="datas.menuname">
    <template slot="title">
      <i class="iconfont" :class="datas.icon"></i>
      <span class="label">{{ datas.menuname }}</span>
    </template>
    <!-- 多级菜单 -->
    <nav-menu-item v-for="(menus, i ) in datas.menus" :datas="menus" :key="i" @click="clickMenu(datas)" />
  </el-submenu>
</template>
<script>
import store from "../vuex/store";
export default {
  name: "NavMenuItem",
  //接收父组件传递的数据，进行渲染
  props: ["datas"],
  data() {
    return {

    }
  },
  methods: {
    //点击把菜单的名字传出去
    clickMenu(val) {
      this.$store.commit("pushtags", val)
    }
  }
};
</script>
<style scoped>
.iconfont{
  margin-right: 15px;
  font-size: 14px;
  font-weight: 800;
}
.label{
  font-size: 13px;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  background: #d0dbec !important;
}

.el-menu-item-group__title {
  padding: 0px;
}

</style>